<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="queryList" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1" :model="formState" :label-col="{ style: { width: '70px' } }">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item name="xmlb" label="项目类别">
              <a-select v-model:value="formState.xmlb" max-tag-count="responsive" mode="multiple" placeholder="请选择" :options="project" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item name="ylfl" label="药理分类">
              <SelectItem v-model:value="formState.ylfl" type="DT00026" mode="multiple" max-tag-count="responsive" placeholder="请选择" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item name="zjm" label="关键字">
              <a-input v-model:value="formState.zjm" placeholder="药品编号/药品名称/商品名称" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <div class="mb-3">
        <a-button type="primary" @click="onAdd">新增</a-button>
        <a-button class="ml-3" @click="onExport">导出</a-button>
      </div>
      <BaseTable
        :loading="loading"
        column-code="00001001"
        :data-source="tableData"
        bordered
        fill
        :pagination="{ total: totalCount }"
        @change="({ current, pageSize }) => queryList(current, pageSize)"
      >
        <!-- column-code="00001001" -->
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="primary" ghost size="small" @click="onHandleEdit(record)"> 修改 </a-button>
            <a-divider type="vertical" />
            <ConfirmModal description="确定删除?" @confirm="onDel(record)">
              <a-button danger ghost size="small"> 删除 </a-button>
            </ConfirmModal>
            <a-divider type="vertical" />
            <ConfirmModal v-if="record.yxzt == 0" description="确定停用?" @confirm="onStorp(record, 1)">
              <a-button danger ghost size="small"> 停用 </a-button>
            </ConfirmModal>
            <a-button v-else type="primary" ghost size="small" @click="onStorp(record, 0)"> 启用 </a-button>
            <a-divider type="vertical" />
            <a-button type="primary" ghost size="small" @click="onSupplies(record)"> 关联耗材 </a-button>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Edit v-model:open="editOpen" :row-data="rowData" @success="onSuceess" />
    <Supplies v-model:open="suppliesOpen" :row-data="rowData" @success="onSave" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post, get } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import ConfirmModal from '@/components/ConfirmModal'
// import tableData from './tableData'
import useUserStore from '@/store/user'
import SelectItem from '@/components/SelectItem'
import Edit from './Edit'
import Supplies from './Supplies'

const rowData = ref(null)
const editOpen = ref(false)
const loading = ref(false)
const suppliesOpen = ref(false)
const tableData = ref(null)
const formRef = ref(null)
const formState = ref({})
const project = ref([])
const title = ref('')
const { empId } = useUserStore()

const onAdd = async () => {
  rowData.value = {}
  editOpen.value = true
  title.value = '新增'
}
const getPharmacologyList = async () => {
  const res = await get('/common/const/getClinicalOrderTypeList')
  project.value = res.data.map((item) => {
    return {
      label: item.mc,
      value: item.bh
    }
  })
}
const onConfirm = async () => {
  queryList()
}
const onDel = async (row) => {
  const res = await post('/operation/dictionary/doDeleteDrugInfo', row)

  if (res.code !== 0) {
    message.error(res.msg)
    return
  }
  queryList()
}
const onStorp = async (row, body) => {
  const res = await post('/operation/dictionary/doModifyDrugStatus', {
    bh: row.bh,
    czr: empId,
    yxzt: body
  })
  if (res.code === 0) {
    message.success(res.msg)
  } else {
    message.error(res.msg)
    return
  }
  onConfirm()
}
const onHandleEdit = (row) => {
  rowData.value = row
  editOpen.value = true
  title.value = '修改'
}
const onSupplies = async (row) => {
  rowData.value = row
  suppliesOpen.value = true
}
const totalCount = ref(0)
const queryList = async (pageNum = 1, pageSize = getSystemConfig('DFFAULT_PAGE_SHOW_COUNT') || 10) => {
  loading.value = true
  const { code, data, total } = await post('operation/opex/getDrugInfoList', {
    pageNum,
    pageSize,
    xmlb: formState.value.xmlb,
    ylfl: formState.value.ylfl,
    zjm: formState.value.zjm
  })
  loading.value = false
  if (code !== 0) return
  totalCount.value = total
  tableData.value = data
}
const onSuceess = () => {
  editOpen.value = false
  queryList()
}
onMounted(() => {
  queryList()
  getPharmacologyList()
})
</script>
<style lang="less" scoped>
.ant-picker {
  width: 100%;
}
</style>
